<template>
	<view class="tab-bar-bottom row" style="justify-content: space-around;align-items: center;">
		<view class="column tab-left"  @click="switchTabs" data-index="1">
			<image :src="current ==1 ?'/static/icon_home_s@2x.png':'/static/icon_home_n2x.png'" mode=""></image>
			<text  :class="current ==1 ? 'text-color':''">首页</text>
		</view>
		<view v-if="isAndroid" class="tab-centre column" @click="switchTabs" data-index="2">
			<image src="/static/icon_shopping@2x.png" mode=""></image>
			<text style="color: #FFFFFF;margin-top: 10rpx;" class="">商城</text>
		</view>
		<view v-else class="tab-centre column" @click="switchTabs" data-index="2">
			<zywork-icon type="icon-saoyisao" color="#fff" size="60"></zywork-icon>
			<text style="color: #FFFFFF;margin-top: 10rpx;" class="">扫一扫</text>
		</view>
		<view class="column tab-right" @click="switchTabs" data-index="3">
			<image :src="current ==3 ?'/static/icon_my_s@2x.png':'/static/icon_my_n@2x.png'" mode=""></image>
			<text :class="current ==3 ? 'text-color':''">我的</text>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			current: {
				type: [Number, String],
				default: 1
			},
			tabBarHeight: {
				type: [Number, String],
				default: 0
			},
			paddingTop: {
				type: [Number, String],
				default: 6
			},
			totalCart: {
				type: [Number, String],
				default: 0
			},
			isAndroid:{
				type:Boolean,
				default:true
			}
		},
		data() {
			return {
			};
		},
		onShow() {
		},
		methods: {
			switchTabs(e) {
				let url = ""
				// console.log(e)
				let current = parseInt(e.currentTarget.dataset.index) 
				switch (current) {
					case 1:
						url = '/pages/index/index'
						break;
					case 2:
						getApp().globalData.types = "TB"
						url = '/pages/tao-bao/tao-bao'
						break;
					case 3:
						url = '/pages/user/user'
						break;
					// default:
					// 	url = '/pages/index/index'
				}
				this.$emit("click", {url:url,index:current})
				// #ifdef APP-NVUE
				e.stopPropagation()
				// #endif
			}
		}

	}
</script>

<style lang="scss">
	.tab-bar-bottom{
		width: 100%;
		// background-color: #F4F8FB;
		height:110rpx;
		position: fixed;
		bottom: 0rpx;
		z-index: 30;
		background-image: url('~@/static/index/tab-bar.png');
		background-size: 100% 110rpx;
		
		text{
			font-size: 22rpx;
		}
		image{
			width: 60rpx;
			height: 60rpx;
		}
		.text-color{
			color: $index-bg-top;
		}
		
		.tab-centre{
			 position: absolute;
			 top:50%;
			 left: 50%;
			 transform: translate(-50%, -94%);
			 width: 170rpx;
			 height: 170rpx;
			 background: $index-bg-bottom;
			 border-radius: 50%;
			 
			 justify-content: center;
			 align-items: center;
		}
		
		.tab-left{
			justify-content: center;
			align-items: center;
			width: 100rpx;
			margin-right: 90rpx;
		}
		
		.tab-right{
			justify-content: center;
			align-items: center;
			width: 100rpx;
			margin-left: 90rpx;
		}
	}
</style>
